<!doctype html>
<!-- 引入notifications的模板标签 -->
{% load notifications_tags %}
{% notifications_unread as unread_count %}
{% load cache %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>{% block title %}{% endblock %} | 博客</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    {% load static %}
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="shortcut icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon"/>

    <!-- used with ckeditor -->
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="{% static 'css/github.css' %}">
    <script src="{% static 'js/highlight.pack.js' %}"></script>
    <script>hljs.initHighlightingOnLoad();</script>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top shadow-sm">
    <div class="container">
        <a class="navbar-brand text-info text-weight-bold" href="{% url 'blog:index' %}">主页</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#flaskNavContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="flaskNavContent">
            <ul class="navbar-nav mr-auto">
                {% if user.is_authenticated %}
                {% for category in nav_categories %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'blog:category_posts' category.name %}">{{ category.name }}</a>
                </li>
                {% endfor %}
                {% endif %}
            </ul>
            <form class="form-inline my-2 my-lg-0" action="/search/">
                <input name="q" class="form-control mr-sm-2" type="search" placeholder="搜索文章..." aria-label="搜索">
                <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav ml-auto">
                <!--下拉框-->
                {% if request.user.is_authenticated %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <!-- 小红点 -->
                        {% if unread_count %}
                        <svg viewBox="0 0 8 8"
                             width="8px"
                             height="8px">
                            <circle cx="4"
                                    cy="4"
                                    r="4"
                                    fill="#ff6b6b"
                            ></circle>
                        </svg>
                        {% endif %}
                        <img src="{{ user.profile.avatar.url }}" alt="个人头像" class="rounded" width="30" height="30">

                    </a>

                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <!--通知计数-->
                        <a class="dropdown-item text-muted" href="{% url 'notice:list' %}"><i class="fa fa-bell"
                                                                                              aria-hidden="true"></i> 通知
                            {% if unread_count %}
                            <span class="badge badge-danger">{{ unread_count }}</span>
                            {% endif %}
                        </a>
                        <a class="dropdown-item text-muted" href="{% url 'blog:create' %}">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            写文章</a>
                        <a class="dropdown-item text-muted" href="{% url 'account:profile' %}"><i class="fa fa-user"
                                                                                                  aria-hidden="true"></i>
                            我的主页</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item text-muted" href="{% url 'account:password_change' %}">更改密码</a>
                        <a class="dropdown-item text-muted" href="{% url 'account:logout' %}">
                            <i class="fa fa-power-off" aria-hidden="true"></i>
                            注销</a>
                    </div>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'account:login' %}">登录</a>
                </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<div class="container mt-1">
    <div class="messages">
        {% if messages %}
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
        {% endif %}
    </div>
</div>

{% block content %}{% endblock %}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<!--支持ajax-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="{% static 'js/getCookie.js' %}"></script>
<script src="{% static 'js/csrf.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
